<template>
  <div class="course-editor">
    <!-- Navigation Header -->
    <div class="editor-header">
      <div class="header-left">
        <router-link to="/teacher/courses" class="back-btn">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
            <path d="M19 12H6m0 0l6 6m-6-6 6-6"/>
          </svg>
          返回课程列表
        </router-link>
        <div class="course-status">
          <h1 class="course-title">{{ isEditing ? '编辑课程' : '创建课程' }}</h1>
          <span v-if="courseData.status" class="status-badge" :class="courseData.status.toLowerCase()">
            {{ getStatusLabel(courseData.status) }}
          </span>
        </div>
      </div>
      
      <div class="header-actions">
        <button @click="saveDraft" :disabled="saving" class="btn btn-secondary">
          <svg v-if="saving" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="loading-spin">
            <path d="M21 12a9 9 0 11-6.219-8.56"/>
          </svg>
          {{ saving ? '保存中...' : '保存草稿' }}
        </button>
        <button v-if="courseData.status !== 'PUBLISHED'" @click="publishCourse" :disabled="!canPublish || saving" class="btn btn-primary">
          发布课程
        </button>
        <button v-else @click="saveDraft" :disabled="saving" class="btn btn-primary">
          {{ saving ? '更新中...' : '更新课程' }}
        </button>
      </div>
    </div>

    <!-- Main Content -->
    <div class="editor-content">
      <!-- Course Basic Info -->
      <div class="editor-section">
        <div class="section-header">
          <h2>基本信息</h2>
          <p>设置您课程的基础信息</p>
        </div>
        
        <div class="section-content">
          <div class="form-grid">
            <!-- Course Cover -->
            <div class="form-group cover-upload">
              <label class="form-label">课程封面</label>
              <div class="cover-container">
                <div v-if="courseData.coverImageUrl" class="cover-preview">
                  <img :src="courseData.coverImageUrl" alt="课程封面" class="cover-image">
                  <div class="cover-overlay">
                    <button @click="openCoverUpload" class="btn btn-secondary btn-sm">更换封面</button>
                    <button @click="removeCover" class="btn btn-danger btn-sm">删除</button>
                  </div>
                </div>
                <div v-else class="cover-placeholder" @click="openCoverUpload">
                  <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                    <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                    <circle cx="8.5" cy="8.5" r="1.5"/>
                    <polyline points="21,15 16,10 5,21"/>
                  </svg>
                  <p>点击上传课程封面</p>
                  <span>推荐尺寸: 1280x720</span>
                </div>
                <input 
                  ref="coverInput" 
                  type="file" 
                  accept="image/*" 
                  @change="handleCoverUpload" 
                  style="display: none"
                >
              </div>
            </div>

            <!-- Course Title -->
            <div class="form-group">
              <label class="form-label required">课程标题</label>
              <input 
                v-model="courseData.title" 
                type="text" 
                placeholder="输入吸引人的课程标题"
                class="form-input"
                maxlength="100"
              >
              <div class="char-count">{{ courseData.title.length }}/100</div>
            </div>

            <!-- Course Description -->
            <div class="form-group full-width">
              <label class="form-label required">课程描述</label>
              <textarea 
                v-model="courseData.description" 
                placeholder="详细描述您的课程内容、学习目标和适合人群"
                class="form-textarea"
                rows="6"
                maxlength="500"
              ></textarea>
              <div class="char-count">{{ courseData.description.length }}/500</div>
            </div>

            <!-- Category -->
            <div class="form-group">
              <label class="form-label required">课程分类</label>
              <select v-model="courseData.categoryId" class="form-select">
                <option value="">选择课程分类</option>
                <option v-for="category in categories" :key="category.id" :value="category.id">
                  {{ category.name }}
                </option>
              </select>
            </div>

            <!-- Difficulty -->
            <div class="form-group">
              <label class="form-label required">难度等级</label>
              <div class="difficulty-options">
                <label v-for="level in difficultyLevels" :key="level.value" class="difficulty-option">
                  <input 
                    v-model="courseData.difficulty" 
                    type="radio" 
                    :value="level.value"
                    class="difficulty-radio"
                  >
                  <div class="difficulty-card">
                    <div class="difficulty-icon">{{ level.icon }}</div>
                    <div class="difficulty-text">
                      <span class="difficulty-name">{{ level.label }}</span>
                      <span class="difficulty-desc">{{ level.description }}</span>
                    </div>
                  </div>
                </label>
              </div>
            </div>

            <!-- Price -->
            <div class="form-group">
              <label class="form-label required">课程价格</label>
              <div class="price-input">
                <span class="price-symbol">¥</span>
                <input 
                  v-model.number="courseData.price" 
                  type="number" 
                  min="0" 
                  step="0.01"
                  placeholder="0.00"
                  class="form-input price-field"
                >
              </div>
              <div class="price-hint">设置为 0 表示免费课程</div>
            </div>
          </div>
        </div>
      </div>

      <!-- Lessons Management -->
      <div class="editor-section">
        <div class="section-header">
          <h2>课程内容</h2>
          <p>添加和管理您的课程章节</p>
        </div>
        
        <div class="section-content">
          <!-- Lessons List -->
          <div class="lessons-container">
            <div v-if="lessons.length === 0" class="empty-lessons">
              <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="var(--gray-400)">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                <polyline points="14,2 14,8 20,8"/>
                <line x1="16" y1="13" x2="8" y2="13"/>
                <line x1="16" y1="17" x2="8" y2="17"/>
                <polyline points="10,9 9,9 8,9"/>
              </svg>
              <h3>还没有添加章节</h3>
              <p>添加第一个章节开始构建您的课程内容</p>
            </div>

            <draggable 
              v-else
              v-model="lessons" 
              item-key="id"
              @end="updateLessonsOrder"
              class="lessons-list"
            >
              <template #item="{ element: lesson, index }">
                <div class="lesson-item">
                  <div class="lesson-handle">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <line x1="3" y1="6" x2="21" y2="6"/>
                      <line x1="3" y1="12" x2="21" y2="12"/>
                      <line x1="3" y1="18" x2="21" y2="18"/>
                    </svg>
                  </div>
                  
                  <div class="lesson-info">
                    <div class="lesson-header">
                      <h4 class="lesson-title">{{ lesson.title }}</h4>
                      <div class="lesson-badges">
                        <span class="lesson-type">{{ getLessonTypeLabel(lesson.lessonType) }}</span>
                        <span v-if="lesson.isFree" class="free-badge">免费</span>
                      </div>
                    </div>
                    <div class="lesson-meta">
                      <span v-if="lesson.duration">时长: {{ formatDuration(lesson.duration) }}</span>
                      <span>第 {{ index + 1 }} 节</span>
                    </div>
                  </div>

                  <div class="lesson-actions">
                    <button @click="editLesson(lesson)" class="btn btn-secondary btn-sm">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/>
                      </svg>
                      编辑
                    </button>
                    <button @click="deleteLesson(lesson)" class="btn btn-danger btn-sm">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                        <polyline points="3,6 5,6 21,6"/>
                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
                      </svg>
                    </button>
                  </div>
                </div>
              </template>
            </draggable>

            <!-- Add Lesson Button -->
            <button @click="addNewLesson" class="add-lesson-btn">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <circle cx="12" cy="12" r="10"/>
                <line x1="12" y1="8" x2="12" y2="16"/>
                <line x1="8" y1="12" x2="16" y2="12"/>
              </svg>
              添加新章节
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Lesson Editor Modal -->
    <el-dialog v-model="showLessonModal" :title="editingLesson ? '编辑章节' : '添加章节'" width="800px">
      <div class="lesson-form">
        <div class="form-group">
          <label class="form-label required">章节标题</label>
          <input 
            v-model="lessonForm.title" 
            type="text" 
            placeholder="输入章节标题"
            class="form-input"
          >
        </div>

        <div class="form-group">
          <label class="form-label required">章节类型</label>
          <select v-model="lessonForm.lessonType" class="form-select">
            <option value="">选择章节类型</option>
            <option value="VIDEO">视频</option>
            <option value="DOCUMENT">文档</option>
            <option value="QUIZ">测验</option>
            <option value="ASSIGNMENT">作业</option>
          </select>
        </div>

        <!-- Video Upload -->
        <div v-if="lessonForm.lessonType === 'VIDEO'" class="form-group">
          <label class="form-label">视频文件</label>
          <div class="upload-area">
            <div v-if="videoUploading" class="upload-progress">
              <div class="progress-bar">
                <div class="progress-fill" :style="{ width: uploadProgress + '%' }"></div>
              </div>
              <span>上传中... {{ uploadProgress }}%</span>
            </div>
            <div v-else-if="lessonForm.videoUrl" class="uploaded-file">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <polygon points="23 7 16 12 23 17 23 7"/>
                <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
              </svg>
              <span>视频已上传</span>
              <button @click="removeVideo" class="btn btn-danger btn-sm">删除</button>
            </div>
            <div v-else class="upload-placeholder" @click="openVideoUpload">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <polygon points="23 7 16 12 23 17 23 7"/>
                <rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
              </svg>
              <p>点击上传视频文件</p>
              <span>支持 MP4, MOV, AVI 格式</span>
            </div>
            <input 
              ref="videoInput" 
              type="file" 
              accept="video/*" 
              @change="handleVideoUpload" 
              style="display: none"
            >
          </div>
        </div>

        <!-- Document Upload -->
        <div v-if="lessonForm.lessonType === 'DOCUMENT'" class="form-group">
          <label class="form-label">文档文件</label>
          <div class="upload-area">
            <div v-if="lessonForm.contentUrl" class="uploaded-file">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                <polyline points="14,2 14,8 20,8"/>
              </svg>
              <span>文档已上传</span>
              <button @click="removeDocument" class="btn btn-danger btn-sm">删除</button>
            </div>
            <div v-else class="upload-placeholder" @click="openDocumentUpload">
              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                <polyline points="14,2 14,8 20,8"/>
              </svg>
              <p>点击上传文档文件</p>
              <span>支持 PDF, DOC, DOCX 格式</span>
            </div>
            <input 
              ref="documentInput" 
              type="file" 
              accept=".pdf,.doc,.docx" 
              @change="handleDocumentUpload" 
              style="display: none"
            >
          </div>
        </div>

        <div class="form-group">
          <label class="form-label">时长（分钟）</label>
          <input 
            v-model.number="lessonForm.duration" 
            type="number" 
            min="0"
            placeholder="0"
            class="form-input"
          >
        </div>

        <div class="form-group">
          <label class="form-label">
            <input v-model="lessonForm.isFree" type="checkbox" class="form-checkbox">
            免费试看
          </label>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <button @click="showLessonModal = false" class="btn btn-secondary">取消</button>
          <button @click="saveLesson" :disabled="!canSaveLesson" class="btn btn-primary">
            {{ editingLesson ? '更新' : '添加' }}
          </button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import draggable from 'vuedraggable'
import { courseApi, lessonApi, uploadApi, type CourseRequest, type LessonRequest, type Course, type Lesson, type Category } from '@/api/course'

const route = useRoute()
const router = useRouter()

// 页面状态
const isEditing = computed(() => !!route.params.id)
const courseId = computed(() => Number(route.params.id))

// 数据状态
const saving = ref(false)
const categories = ref<Category[]>([])
const courseData = ref<CourseRequest & { status?: string }>({
  title: '',
  description: '',
  categoryId: 0,
  price: 0,
  difficulty: 'BEGINNER',
  coverImageUrl: ''
})

const lessons = ref<Lesson[]>([])

// 章节编辑
const showLessonModal = ref(false)
const editingLesson = ref<Lesson | null>(null)
const lessonForm = ref<LessonRequest>({
  title: '',
  lessonType: 'VIDEO',
  isFree: false,
  contentUrl: '',
  videoUrl: '',
  duration: 0,
  orderNo: 0
})

// 文件上传
const coverInput = ref<HTMLInputElement>()
const videoInput = ref<HTMLInputElement>()
const documentInput = ref<HTMLInputElement>()
const videoUploading = ref(false)
const uploadProgress = ref(0)

// 表单选项
const difficultyLevels = [
  { value: 'BEGINNER', label: '初级', icon: '🌱', description: '适合新手入门' },
  { value: 'INTERMEDIATE', label: '中级', icon: '🚀', description: '需要一定基础' },
  { value: 'ADVANCED', label: '高级', icon: '💎', description: '适合进阶学习' }
]

// 计算属性
const canPublish = computed(() => {
  return courseData.value.title && 
         courseData.value.description && 
         courseData.value.categoryId && 
         courseData.value.difficulty &&
         lessons.value.length > 0
})

const canSaveLesson = computed(() => {
  return lessonForm.value.title && lessonForm.value.lessonType
})

// 方法
const loadCategories = async () => {
  try {
    categories.value = await courseApi.getCategories()
  } catch (error) {
    ElMessage.error('加载分类失败')
  }
}

const loadCourseData = async () => {
  if (!isEditing.value) return
  
  try {
    const [course, courseLessons] = await Promise.all([
      courseApi.getTeacherCourseDetail(courseId.value),
      lessonApi.getCourseLessons(courseId.value)
    ])
    
    courseData.value = {
      title: course.title,
      description: course.description,
      categoryId: course.categoryId || 0,
      price: course.price,
      difficulty: course.difficulty,
      coverImageUrl: course.coverImageUrl || course.coverUrl, // 支持两种字段名
      status: course.status
    }
    
    lessons.value = courseLessons.sort((a, b) => a.orderNo - b.orderNo)
  } catch (error) {
    ElMessage.error('加载课程数据失败')
    router.push('/teacher/courses')
  }
}

const saveDraft = async () => {
  if (!courseData.value.title || !courseData.value.description) {
    ElMessage.warning('请填写课程标题和描述')
    return
  }
  
  saving.value = true
  try {
    console.log('💾 开始保存课程草稿:', courseData.value)
    if (isEditing.value) {
      console.log('📝 更新现有课程，ID:', courseId.value)
      await courseApi.updateCourse(courseId.value, courseData.value)
      ElMessage.success('保存成功')
    } else {
      console.log('🆕 创建新课程')
      const newCourse = await courseApi.createCourse(courseData.value)
      ElMessage.success('课程创建成功')
      router.replace(`/teacher/courses/${newCourse.id}/edit`)
    }
  } catch (error) {
    console.error('❌ 保存课程失败:', error)
    ElMessage.error(`保存失败: ${error.response?.data?.message || error.message || '未知错误'}`)
  } finally {
    saving.value = false
  }
}

const publishCourse = async () => {
  if (!canPublish.value) {
    ElMessage.warning('请完善课程信息和内容后再发布')
    return
  }
  
  // 检查课程是否已经发布
  if (courseData.value.status === 'PUBLISHED') {
    ElMessage.warning('课程已经发布，如需修改请直接保存更新')
    return
  }
  
  try {
    await ElMessageBox.confirm(
      '确定要发布这个课程吗？发布后学生即可购买学习。',
      '发布课程',
      {
        confirmButtonText: '发布',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    // 先保存再发布
    console.log('🚀 开始发布课程流程')
    await saveDraft()
    if (isEditing.value) {
      console.log('📢 发布课程，ID:', courseId.value)
      await courseApi.publishCourse(courseId.value)
      ElMessage.success('课程发布成功')
      courseData.value.status = 'PUBLISHED'
    }
  } catch (error) {
    console.error('❌ 发布课程失败:', error)
    if (error !== 'cancel') {
      ElMessage.error(`发布失败: ${error.response?.data?.message || error.message || '未知错误'}`)
    }
  }
}

// 封面上传
const openCoverUpload = () => {
  coverInput.value?.click()
}

const handleCoverUpload = async (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0]
  if (!file) return
  
  try {
    const result = await uploadApi.uploadCourseCover(file)
    courseData.value.coverImageUrl = result.url
    ElMessage.success('封面上传成功')
  } catch (error) {
    ElMessage.error('封面上传失败')
  }
}

const removeCover = () => {
  courseData.value.coverImageUrl = ''
}

// 章节管理
const addNewLesson = () => {
  lessonForm.value = {
    title: '',
    lessonType: 'VIDEO',
    isFree: false,
    contentUrl: '',
    videoUrl: '',
    duration: 0,
    orderNo: lessons.value.length + 1
  }
  editingLesson.value = null
  showLessonModal.value = true
}

const editLesson = (lesson: Lesson) => {
  lessonForm.value = { ...lesson }
  editingLesson.value = lesson
  showLessonModal.value = true
}

const saveLesson = async () => {
  if (!canSaveLesson.value) return
  
  try {
    if (editingLesson.value) {
      const updated = await lessonApi.updateLesson(
        courseId.value, 
        editingLesson.value.id, 
        lessonForm.value
      )
      const index = lessons.value.findIndex(l => l.id === editingLesson.value!.id)
      lessons.value[index] = updated
      ElMessage.success('章节更新成功')
    } else {
      const newLesson = await lessonApi.createLesson(courseId.value, lessonForm.value)
      lessons.value.push(newLesson)
      ElMessage.success('章节添加成功')
    }
    showLessonModal.value = false
  } catch (error) {
    ElMessage.error('保存章节失败')
  }
}

const deleteLesson = async (lesson: Lesson) => {
  try {
    await ElMessageBox.confirm(
      `确定要删除章节"${lesson.title}"吗？`,
      '删除章节',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'error'
      }
    )
    
    await lessonApi.deleteLesson(courseId.value, lesson.id)
    lessons.value = lessons.value.filter(l => l.id !== lesson.id)
    ElMessage.success('章节删除成功')
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败')
    }
  }
}

const updateLessonsOrder = async () => {
  const lessonIds = lessons.value.map(lesson => lesson.id)
  try {
    await lessonApi.reorderLessons(courseId.value, lessonIds)
  } catch (error) {
    ElMessage.error('更新章节顺序失败')
  }
}

// 视频上传
const openVideoUpload = () => {
  videoInput.value?.click()
}

const handleVideoUpload = async (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0]
  if (!file) return
  
  videoUploading.value = true
  uploadProgress.value = 0
  
  try {
    const result = await uploadApi.uploadVideo(file, (progress) => {
      uploadProgress.value = progress
    })
    lessonForm.value.videoUrl = result.url
    ElMessage.success('视频上传成功')
  } catch (error) {
    ElMessage.error('视频上传失败')
  } finally {
    videoUploading.value = false
  }
}

const removeVideo = () => {
  lessonForm.value.videoUrl = ''
}

// 文档上传
const openDocumentUpload = () => {
  documentInput.value?.click()
}

const handleDocumentUpload = async (event: Event) => {
  const file = (event.target as HTMLInputElement).files?.[0]
  if (!file) return
  
  try {
    const result = await uploadApi.uploadDocument(file)
    lessonForm.value.contentUrl = result.url
    ElMessage.success('文档上传成功')
  } catch (error) {
    ElMessage.error('文档上传失败')
  }
}

const removeDocument = () => {
  lessonForm.value.contentUrl = ''
}

// 工具函数
const getStatusLabel = (status: string) => {
  const labels: Record<string, string> = {
    'PUBLISHED': '已发布',
    'DRAFT': '草稿'
  }
  return labels[status] || status
}

const getLessonTypeLabel = (type: string) => {
  const labels: Record<string, string> = {
    'VIDEO': '视频',
    'DOCUMENT': '文档',
    'QUIZ': '测验',
    'ASSIGNMENT': '作业'
  }
  return labels[type] || type
}

const formatDuration = (minutes: number) => {
  if (minutes < 60) return `${minutes}分钟`
  const hours = Math.floor(minutes / 60)
  const mins = minutes % 60
  return `${hours}小时${mins > 0 ? mins + '分钟' : ''}`
}

onMounted(() => {
  loadCategories()
  loadCourseData()
})
</script>

<style scoped>
.course-editor {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6);
  background-color: var(--bg-secondary);
  min-height: 100vh;
}

.editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  margin-bottom: var(--space-6);
}

.header-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.back-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  text-decoration: none;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.back-btn:hover {
  color: var(--primary-color);
  background-color: var(--gray-50);
}

.course-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.course-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
  color: var(--text-primary);
}

.status-badge {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: white;
}

.status-badge.published {
  background-color: var(--success-color);
}

.status-badge.draft {
  background-color: var(--warning-color);
}

.header-actions {
  display: flex;
  gap: var(--space-3);
}

.loading-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.editor-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.editor-section {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
}

.section-header {
  padding: var(--space-6) var(--space-6) 0;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--space-6);
}

.section-header h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-2) 0;
  color: var(--text-primary);
}

.section-header p {
  color: var(--text-secondary);
  margin: 0 0 var(--space-6) 0;
}

.section-content {
  padding: 0 var(--space-6) var(--space-6);
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group.cover-upload {
  grid-column: 1 / -1;
}

.form-label {
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.form-label.required::after {
  content: '*';
  color: var(--error-color);
  margin-left: var(--space-1);
}

.form-input,
.form-textarea,
.form-select {
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  transition: all var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(236, 82, 82, 0.1);
}

.char-count {
  text-align: right;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.cover-container {
  border: 2px dashed var(--border-medium);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cover-preview {
  position: relative;
  height: 200px;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.cover-preview:hover .cover-overlay {
  opacity: 1;
}

.cover-placeholder {
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.cover-placeholder:hover {
  background-color: var(--gray-50);
  color: var(--text-primary);
}

.cover-placeholder p {
  margin: var(--space-2) 0 var(--space-1) 0;
  font-weight: var(--font-weight-medium);
}

.cover-placeholder span {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.difficulty-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

.difficulty-option {
  cursor: pointer;
}

.difficulty-radio {
  display: none;
}

.difficulty-card {
  padding: var(--space-4);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: all var(--transition-fast);
}

.difficulty-radio:checked + .difficulty-card {
  border-color: var(--primary-color);
  background-color: var(--primary-color);
  color: white;
}

.difficulty-card:hover {
  border-color: var(--border-medium);
}

.difficulty-icon {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-2);
}

.difficulty-name {
  display: block;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
}

.difficulty-desc {
  font-size: var(--font-size-sm);
  opacity: 0.8;
}

.price-input {
  position: relative;
}

.price-symbol {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

.price-field {
  padding-left: var(--space-8);
}

.price-hint {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  margin-top: var(--space-1);
}

.lessons-container {
  min-height: 200px;
}

.empty-lessons {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-12);
  color: var(--text-secondary);
  text-align: center;
}

.empty-lessons h3 {
  font-size: var(--font-size-xl);
  color: var(--text-primary);
  margin: var(--space-4) 0 var(--space-2) 0;
}

.lessons-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.lesson-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: all var(--transition-fast);
}

.lesson-item:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-sm);
}

.lesson-handle {
  color: var(--text-muted);
  cursor: grab;
}

.lesson-info {
  flex: 1;
}

.lesson-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.lesson-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  margin: 0;
  color: var(--text-primary);
}

.lesson-badges {
  display: flex;
  gap: var(--space-2);
}

.lesson-type {
  background: var(--gray-100);
  color: var(--text-secondary);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.free-badge {
  background: var(--success-color);
  color: white;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
}

.lesson-meta {
  display: flex;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.lesson-actions {
  display: flex;
  gap: var(--space-2);
}

.add-lesson-btn {
  width: 100%;
  padding: var(--space-4);
  border: 2px dashed var(--border-medium);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-medium);
  transition: all var(--transition-fast);
}

.add-lesson-btn:hover {
  border-color: var(--primary-color);
  color: var(--primary-color);
  background-color: var(--gray-50);
}

.lesson-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.upload-area {
  border: 2px dashed var(--border-medium);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.upload-placeholder:hover {
  color: var(--text-primary);
}

.upload-placeholder p {
  margin: var(--space-2) 0 var(--space-1) 0;
  font-weight: var(--font-weight-medium);
}

.upload-placeholder span {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.upload-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.progress-bar {
  width: 200px;
  height: 8px;
  background: var(--gray-200);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--primary-color);
  transition: width var(--transition-fast);
}

.uploaded-file {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--success-color);
}

.form-checkbox {
  margin-right: var(--space-2);
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
}

.btn-danger {
  background-color: var(--error-color);
  color: white;
  border: none;
}

.btn-danger:hover {
  background-color: var(--error-light);
}

@media (max-width: 768px) {
  .editor-header {
    flex-direction: column;
    gap: var(--space-4);
  }
  
  .form-grid {
    grid-template-columns: 1fr;
  }
  
  .difficulty-options {
    grid-template-columns: 1fr;
  }
  
  .lesson-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .lesson-actions {
    align-self: stretch;
    justify-content: flex-end;
  }
}
</style>

